<template>
  <!-- <div>
        {{$props.template}} v-bind="$props"
    </div> -->
  <component :is="componentName" v-bind="$props" />
</template>
<script>
  import Vue from 'vue';

  export default {
    name: 'AsyncComponent',
    props: [
      'dataFile',
      'sectionStyle',
      'sectionThemeData',
      'sectionData',
      'categoryList',
      'contentWidth',
      'entityId',
      'template',
      'withBorder',
      'dataList',
    ],
    data() {
      return {
        componentName: '',
      };
    },
    created() {
      console.log(this.$props);
      this.init();
    },
    methods: {
      init() {
        let { template } = this;
        // template = "custom-groupNewsSection";
        let src = `/seeyon/portal/js-sections/${template}/index.js`;
        let name = template;
        this.componentName = name;
        if (window[name]) {
          // this.$emit('onload');
          return; // 已经装载过这个栏目了
        }
        Vue.component(name, (resolve, reject) => {
          console.log(src);
          var scriptEle = document.createElement('script');
          scriptEle.type = 'text/javascript';
          scriptEle.src = src;
          const readyFunc = () => {
            let cmp = window[name];
            console.log(cmp, 2);
            if (cmp) {
              if (cmp.default && (cmp.render || cmp.default.render)) {
                resolve(cmp);
              } else {
                // 挂载第三方插件
                const tmp = {
                  props: [
                    'dataFile',
                    'sectionStyle',
                    'sectionThemeData',
                    'sectionData',
                    'categoryList',
                    'contentWidth',
                    'entityId',
                    'template',
                    'withBorder',
                    'dataList',
                  ],
                  render() {
                    return <div></div>;
                  },
                  mounted: function () {
                    console.log(this.$props, 3);
                    cmp.init(this.$el, this.$props, this);
                  },
                  beforeDestroy: function () {
                    if (typeof cmp.beforeDestroy == 'function') cmp.beforeDestroy(this.$el);
                  },
                };
                resolve(tmp);
              }
            }
            // this.$emit('onload');
          };
          if (SeeUtils.isIE8) {
            scriptEle.onreadystatechange = readyFunc;
          } else {
            scriptEle.onload = readyFunc;
          }
          document.body.appendChild(scriptEle);
        });
      },
    },
  };
</script>
<style></style>
